<template>
  <div>
    <TopNav title="编辑中心" :bgc="$colorObj.color" />
    <div class="header">
      <van-uploader :after-read="editPhoto">
        <img
          v-if="userInfo.head_img"
          :src="$axios.defaults.baseURL + userInfo.head_img"
          alt=""
        />
        <img v-else src="@/assets/logo.png" alt="" />
      </van-uploader>
    </div>
    <PersonalBar
      label="昵称"
      :text="userInfo.nickname"
      @barClick="isShowNickname = true"
    />
    <PersonalBar label="密码" text="******" @barClick="isShowPassword = true" />
    <PersonalBar
      label="性别"
      :text="userInfo.gender == 1 ? '男' : '女'"
      @barClick="isShowGender = true"
    />
    <PersonalBar label="主题风格" @barClick="$router.push('/Theme')" />
    <PersonalBar
      label="个人主页背景"
      :url="url"
      @barClick="$router.push('/background')"
    />

    <!-- 修改昵称 -->
    <van-dialog
      v-model="isShowNickname"
      title="修改昵称"
      show-cancel-button
      @confirm="editNickname"
    >
      <van-field v-model="newNickname" placeholder="请输入昵称" />
    </van-dialog>

    <!-- 修改密码 -->
    <van-dialog
      v-model="isShowPassword"
      title="修改密码"
      show-cancel-button
      @confirm="editPassword"
    >
      <van-field v-model="newPassword" placeholder="请输入密码" />
    </van-dialog>

    <!-- 修改性别 -->
    <van-action-sheet
      v-model="isShowGender"
      :actions="actions"
      close-on-click-action
      @select="editGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
import PersonalBar from "@/components/PersonalBar";
export default {
  components: {
    TopNav,
    PersonalBar,
  },
  data() {
    return {
      url: "",
      userInfo: [],
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      newNickname: "",
      newPassword: "",
      newGender: "",
      actions: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 },
      ],
    };
  },
  created() {
    this.loadPage();
  },
  mounted() {
    this.url = this.$backgroundImg.url
      ? this.$backgroundImg.url
      : require("@/assets/1.jpg");
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
      }).then((res) => {
        this.userInfo = res.data.data;
      });
    },

    setEdit(data) {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "post",
        data,
      }).then((res) => {
        if (res.data.message == "修改成功") {
          this.$toast.success(res.data.message);
          this.loadPage();
          this.newNickname = this.newPassword = "";
        }
      });
    },

    editNickname() {
      if (!this.newNickname) {
        this.$toast.fail("昵称不能为空");
        return;
      }
      this.setEdit({ nickname: this.newNickname });
    },
    editPassword() {
      if (!this.newPassword) {
        this.$toast.fail("密码不能为空");
        return;
      }
      this.setEdit({ password: this.newPassword });
    },
    editGender(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.setEdit({ gender: item.gender });
    },
    editPhoto(fileObj) {
      let fd = new FormData();
      fd.append("file", fileObj.file);
      this.$axios({
        url: "/upload",
        method: "post",
        data: fd,
      }).then((res) => {
        if (res.data.message == "文件上传成功") {
          this.setEdit({ head_img: res.data.data.url });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  text-align: center;
  padding-top: 76 / 360 * 100vw;
  padding-bottom: 30 / 360 * 100vw;
  img {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
  }
}
</style>
